<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="购物车" left-arrow @click-left="$router.back()" />
        </header>
        <div class="content">
            <div class="shop1" v-if="this.cartList == undefined">
                <van-empty description="购物车一件物品都没有">
                    <van-button @click="$router.push('/home')" round type="danger" class="bottom-button">立即购物
                    </van-button>
                </van-empty>
            </div>
            <div class="shop2">
                <van-swipe-cell v-for="item in cartList" :key="item.cartid">
                    <div class="xz">
                        <van-checkbox v-model="item.flag" @click="dxCart(item.flag, item.cartid)" />
                    </div>
                    <van-card :num="item.num" :price="item.originprice * item.num" :title="item.proname"
                        :thumb="item.img1">
                        <template #num>
                            <van-stepper @change="UpCart(item.cartid, item.num)" v-model="item.num" theme="round"
                                button-size="22" />
                        </template>
                    </van-card>
                    <template #right>
                        <van-button @click="reCart(item.cartid)" square type="danger" text="删除" class="delete-button" />
                    </template>
                </van-swipe-cell>
                <!-- 底部 -->
                <van-submit-bar :price="Allprice" button-text="提交订单" @submit="onSubmit">
                    <van-checkbox v-model="checked" @click="qxCart">全选</van-checkbox>
                </van-submit-bar>
            </div>
        </div>
    </div>
</template>

<script>

import Vue from 'vue';
import { SwipeCell, Card, Empty, NavBar, NoticeBar, SubmitBar, Checkbox, Stepper, Toast } from 'vant';

import { getCartList, removeCartList, SelectOne, SelectAll, Updatenum } from '@/api/cart'

import { AddOrder } from '@/api/order'

// 标题，导航栏
Vue.use(NavBar)
// 删除，滑动单元格
Vue.use(SwipeCell);
// 商品卡片
Vue.use(Card);
// 空状态，未登录时显示
Vue.use(Empty);
// 提交订单烂
Vue.use(SubmitBar);
// 通知栏
Vue.use(NoticeBar);
// 全选
Vue.use(Checkbox)
// 加减
Vue.use(Stepper)
// 提示
Vue.use(Toast)

export default {
    data() {
        return {
            // 默认
            value: 1,
            cartList: [],
            fg: true,
            // 选择
            checked: false,
        }
    },
    computed: {
        // 总价
        Allprice() {
            if (this.cartList == undefined) {
            } else {
                return this.cartList.reduce((sum, item) =>
                    item.flag ? sum += item.num * item.originprice : sum + 0, 0) * 100
            }

            // sum += item.num * item.originprice, 0) * 100

            // return this.cartList.reduce((sum, item) =>
            //     sum += item.num * item.originprice, 0) * 100

            // return this.cartList.reduce((sum, item) => {
            //     return item.flag ? sum + item.num * item.originprice : sum + 0
            // }, 0) * 100
        }
    },
    methods: {
        UpCart(cartid, num) {
            Updatenum({ cartid, num })
                .then()
            // console.log(cartid, num);
        },

        onSubmit() {
            // 去确认订单
            // AddOrder({
            //     userid: localStorage.getItem('userid')
            // }).then(res => {
            //     getCartList().then(res => {
            //         // console.log(res)
            //         console.log(res);
            //         if (res.code == '10020') {
            //             Toast('购物车不能为空')
            //         } else {
            //             this.$router.push('/order/' + res.time)
            //         }
            //     })
            // })

            // if (this.flag) {
            //     AddOrder({
            //         userid: localStorage.getItem('userid')
            //     }).then(res => {
            //         this.$router.push('/order/' + res.time)
            //     })
            // } else {
            //     Toast('购物车不能为空')
            // }

            AddOrder({ userid: localStorage.getItem('userid') }).then(res => {
                const submitflag = this.cartList.some(el => {
                    return el.flag == true
                })
                if (submitflag) {
                    this.$router.push('/order/' + res.time)
                } else {
                    Toast('请选择商品')
                }
            })
            //跳转到确认订单页面


            // AddOrder({
            //     userid: localStorage.getItem('userid')
            // }).then(res => {
            //     this.$router.push('/order/' + res.time)
            // })
        },
        // 更新当前购物车数据的选中状态 --- 单选
        dxCart(flag, cartid) {
            console.log(flag, cartid);
            SelectOne({ flag, cartid })
                .then(this.checked = this.cartList.every(item => item.flag))
        },

        // 更新购物车选中数据 --- 全选
        qxCart() {
            SelectAll({
                userid: localStorage.getItem('userid'),
                type: this.checked
            }).then(() => this.getCartListData())
        },

        // 删除单条数据
        reCart(cartid) {
            removeCartList({ cartid }).then(() => {
                console.log(this.cartList);
                console.log(cartid);
                this.cartList.splice(this.cartList.findIndex(item => item.cartid === cartid), 1)
            })
        },

        // 查看购物车数据
        getCartListData() {
            getCartList({
                userid: localStorage.getItem('userid')
            }).then(res => {
                // console.log(res)
                if (res.data === '10020') {
                    this.fg = true
                } else {
                    this.fg = false
                    this.cartList = res.data
                }
            })
        }
    },
    mounted() {
        // if (this.$store.state.user.loginState) {
        //     getCartList({ userid: localStorage.getItem('userid') })
        //         .then(res => {
        //             // console.log(res);
        //             if (res.data.code === '10020') {
        //                 this.fg = true
        //             } else {
        //                 this.fg = false
        //                 this.cartList = res.data
        //                 // console.log(this.cartList);
        //             }
        //         }).catch(err => {
        //             // console.log(err);
        //         })
        // } else {
        //     // 前端校验为未登录状态
        //     this.$router.push('/login')
        // }

        if (localStorage.getItem('loginState') === 'true') {
            this.getCartListData()
        } else {
            this.$router.push('/login')
        }
    }

}
</script>
<style>
.shop2 {
    padding-bottom: 60px;
}

.delete-button {
    /* height: 100%; */
    /* margin-top: 30px; */
    height: 100px;
}

.xz {
    position: fixed;
    top: 40px;
    left: 10px;
    z-index: 1;
}

.van-card {
    padding-left: 40px;
}
</style>